<template>

  <view :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">
	  
	  <view class="container css-theme" :class="[cueTheme]">
	  	<view class="top_box">

	  		<view class="textarea-container">
	  		  <textarea class="textarea" v-model="issue" placeholder="问题意见描述" placeholder-class="placeholder_style" ></textarea>
	  		</view>
	  	</view>
		
		<view class="top_box">
			 <view class="container_box">
			  <view class="container_box_left">
				<view class="tn-icon-phone-fill" style="font-size: 18px;"></view>
				<text>|</text>
				<input  v-model="contact"  type="text" placeholder="微信或者QQ" placeholder-class="placeholder_style" />
			  </view>
			</view>
		
		</view>
		
		<dynamic-demo-template   ref="demoTemplate" :sectionList="sectionList" :full="true" :fullWindowsScroll="fullWindowsScroll" @click="click">
		  <tn-image-upload
		    ref="imageUpload"
		    :action="action"
		    :formData="formData"
		    :fileList="fileList"
		    :disabled="disabled"
		    :autoUpload="autoUpload"
		    :maxCount="maxCount"
		    :showUploadList="showUploadList"
		    :showProgress="showProgress"
		    :deleteable="deleteable"
		    :customBtn="customBtn"
		    :beforeUpload="beforeUpload"
		    @on-list-change="listChange"
		    @on-oversize="oversize"
		    @on-exceed="exceed"
		    @on-choose-complete="chooseComplete"
		    @on-choose-fail="chooseFail"
		    @on-uploaded="uploaded"
		    @on-success="uploadSuccess"
		    @on-change="uploadChange"
		    @on-progress="uploadProgress"
		    @on-error="uploadError"
		    @on-remove="fileRemove"  class="css-theme" :class="[cueTheme]"
		  >
		    <view v-if="!showUploadList" slot="file" style="width: 100%;">
		      <view v-for="(item,index) in lists" :key="index" class="tn-image-upload__item"  >
		        <image
		          class="tn-image-upload__item__image"
		          :src="item.url || item.path"
		          mode="aspectFill"
		        ></image>
		      </view>
		    </view>
		
		    <view v-if="customBtn" slot="addBtn" class="tn-image-upload__custom-btn" hover-class="tn-hover-class" hover-stay-time="150">
		      <view>选择图片</view>
		    </view>
		  </tn-image-upload>
		
		</dynamic-demo-template>
		
		
	  </view>
	   <view class="container">
		  <view style="float: left;width: 100%;margin-top: 40rpx;">
			<button @click="saveData()" style="border-radius: 30px;background-color:#5A9CFC ;color:white;font-weight: bolder;">保存</button>
		  </view>
	  </view>
	 
  </view>

</template>

<script>
  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
  import {
  	requestAndroidPermission,
  	gotoAppPermissionSetting,
  	judgeIosPermission
  } from '@/common/auth.js'
  var _self
  export default {
    components: {dynamicDemoTemplate},
    data() {
      return {
		  user: [],
		contact: '',
		issue: '',
        action: getApp().globalData.url+ '/common/upload',
		urls:'',
        formData: {
          apiType: 'this,ali',
          token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
          image: null
        },

        fileList: [],
        showUploadList: true,
        customBtn: false,
        autoUpload: true,
        showProgress: true,
        deleteable: true,
        customStyle: false,
        maxCount: 9,
        disabled: false,
        
        lists: [],
        
        sectionList: [
          {
            name: '参数切换',
            section: [
              
            ]
          }
        ],
        fullWindowsScroll: false
      }
    },
	destroyed() {
		// _self.saveData();
	},
	onLoad(options) {
		_self = this;
		
	},
	onShow() {
		uni.getStorage({
			key: 'user',
			success: function (res) {
				if(res.data){
					_self.user=res.data
					
				}
			},fail:function(e){
				console.log(e)
				uni.navigateTo({
						url: '../login/login'
				});
			}
		})
	
	},
    methods: {
      click(event) {
		 
        this[event.methods] && this[event.methods](event)
      },
     
   
      // 文件上传前执行
      beforeUpload(index, lists) {
        console.log('文件上传前执行', lists, index);
        console.log(this.formData);
        this.formData.image = lists[index].file
        return true
      },
      
      
      listChange(lists, index) {
        console.log('上传文件列表发生改变', lists, index);
        this.lists.splice(0, this.lists.length)
        this.$nextTick(() => {
          this.lists = this.$tn.deepClone(lists)
          if (this.customStyle && lists.length > 4) {
            this.fullWindowsScroll = true
          } else {
            this.$refs.demoTemplate.updateSectionScrollView()
          }
        })
      },
      oversize(val, lists, index) {
        console.log('上传的文件超过大小', val, lists, index);
      },
      exceed(val, lists, index) {
        console.log('上传的文件超过允许数量', val, lists, index);
      },
      chooseComplete(lists, index) {
        console.log('文件选择成功', lists, index);
      },
      chooseFail(err) {
        console.log('文件选择失败', err);
      },
      uploaded(lists, index) {
        console.log('全部上传文件处理完成', lists, index);
		var urls="";
		for(var i=0;i<lists.length;i++){
			if(i==0){
				urls+=lists[i].response.fileName
			}else{
				urls+=","+lists[i].response.fileName
			}
		}
		this.urls = urls
		console.log(urls)
      },
      uploadSuccess(data, currentIndex, lists, index) {
        console.log('文件上传成功', data, currentIndex, lists, index);
      },
      uploadChange(res, currentIndex, lists, index) {
        console.log('文件上传信息有变', res, currentIndex, lists, index);
      },
      uploadProgress(res, currentIndex, lists, index) {
        // console.log('文件上传进度', res, currentIndex, lists, index);
      },
      uploadError(err, currentIndex, lists, index) {
        console.log('文件上传失败', err, currentIndex, lists, index);
      },
      fileRemove(currentIndex, lists, index) {
        console.log('文件移除成功', currentIndex, lists, index);
      },
	  
	   saveData() {
	  	  	if(_self.issue == ''){
				uni.showToast({
					title: "请输入描述",
					duration: 2000,
					icon: "none"
				});
				return
			}
	  	  	var data = {
	  	  		userId: _self.user.id,
	  	  		issue: _self.issue,
	  	  		contact: _self.contact,
	  	  		images: _self.urls,
	  	  	}
	  	  		
	  	  	this.$api.updateUserSuggest(data).then((res) => {
	  	  		var resData = res
	  	  		if (resData.code == "200") {
	  	  			
	  	  			uni.navigateBack({
	  	  				delta: 1 // 默认值是1，表示返回的页面层数
	  	  			});
	  	  		} else {
	  	  			uni.showToast({
	  	  				title: '保存失败',
	  	  				duration: 2000,
	  	  				icon: 'none'
	  	  			})
	  	  		}
	  	  	})
	  	  	
	  	  },
		  
    },

  }
</script>
<style lang="scss" >
  page {
  	height: 100%;
  	background-color: $page-bg !important;
  	width: 100%;
  	margin:0px;
  }
</style>
<style lang="scss" scoped>
  page {
  	height: 100%;
  	background-color: $page-bg !important;
  	width: 100%;
  	margin:0px;
  }
  .css-theme {
  	@include text-color();
  	@include base-background();
  	@include border-color();
  	@include shadow-color();
  }
  
  .demo-container--full{
	  padding-bottom: 0px !important;
  }
  .tn-image-upload__item {
    width: 100%;
    height: 180rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    background-color:$page-bg !important;
    &__image {
      width: 100%;
      height: 180rpx;
      border-radius: 30rpx;
    }
  }
  
  .tn-image-upload__custom-btn {
    // background-color: $tn-font-holder-color;
    width: 100%;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30rpx;
  }
  
  
  .container {
    padding: 20rpx;
    width: 94%;
    float: left;
    margin-left: 3%;
    margin-top: 20rpx;
    // background-color: #ffffff;
    border-radius: 5px;
    
  }
  .top_box{
  	float: left;
  	width: 100%;
  	
  }
  .input-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .label {
    width: 100px;
    font-size: 16px;
  }
  
  
  .textarea-container {
    display: flex;
    flex-direction: column;
  }
  
  .textarea {
    height: 240px;
    border: 1px solid #f1f1f1;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    width: 100%;
  }
  
  .fixed-image {
    position: fixed;
    right: 20px; /* 可根据需要调整位置 */
    bottom: 20px; /* 可根据需要调整位置 */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .fixed-image image{
  	width: 80rpx;
  	height: 80rpx;
  }
  
  
  .container_box{
  	 display: flex;
  	  justify-content: space-between;
  	  align-items: center;
  	  padding: 20rpx 10rpx;
  	  border: 1px solid #f1f1f1;
  	  margin:16rpx 0rpx;
	  border-radius: 5px;
  }
  
  .container_box_left {
    display: flex;
    align-items: center;
  }
  
  .container_box_left  image{
  	width: 20px;
  	height: 20px;
  }
  
  .container_box_left  text{
  	color:#f1f1f1;
  	margin-left: 10rpx;
  	margin-right: 10rpx;
  }
  .placeholder_style{
  	color: #ccc;
  }
</style>
